<template>
  <div>
    <div class="d_header">
      <div class="d_header_left">
        <a @click="goback" href="javascript:;">
          <img class="typeCake" src="../assets/images/left_go.png" alt="" />
        </a>
        <a @click="goback" href="javascript:;" class="fanhui">返回</a>
      </div>

      <div class="d_header_middle">蛋糕详情</div>
    </div>
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in cakeBanner" :key="item.cc_id">
          <a href="javascript:;">
            <img :src="item.cc_pic" alt="" class="index_img" />
          </a>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="cake_info">
      <div class="cake_info_pirce">
        ￥{{ cakeDetails.price }}.00 - ￥{{ cakeDetails.max_price }}.00
      </div>
      <div class="cake_info_title">{{ cakeDetails.cake_title }}</div>
      <div class="cake_info_introduce">
        {{ cakeDetails.brief_introduction }}
      </div>
      <div class="cake_info_attention">
        注意：巧克力味请自行提前1天购买、提拉米苏及乳酪请提前3天购买。
      </div>
    </div>
    <div class="sel_norms" @click="showPopup">
      <span>选择：产品规格</span>
      <a href="javascript:;"
        ><img class="go_guige" src="../assets/images/go_guige.png" alt=""
      /></a>
    </div>

    <div class="prosx">
      <ul>
        <li>适合人群：各类人群（建议婴幼儿、老人、病患者谨慎食用）</li>
        <li>保存条件：冷藏2天（建议当天食用）</li>
      </ul>
    </div>
    <div class="cake_big_img">
      <p>
        <img
          v-for="item in cakeDetailImg"
          :key="item.cd_id"
          :src="item.cd_pic"
          alt=""
        />
      </p>
    </div>
    <div class="wxts">
      <div class="wxts_title">温馨提示</div>
      <div class="wxts_content">
        <div class="wxts_content_item">
          <p>1.预定提示</p>
          <p>
            天然奶油蛋糕30cm（含）以下规格需要您提前4小时预订，慕斯蛋糕、乳酪蛋糕、糖醇坯蛋糕、及大型庆典蛋糕，需要您提前两天16：00前预订，巧克力风味蛋糕，需要您提前一天16:00前预订，特殊款蛋糕预订时间以商品页面提示为准。
          </p>
        </div>

        <div class="wxts_content_item">
          <p>2.您可以通过以下方式订购：</p>
          <p>
            1、网上订购：通过味多美官网http://www.wdmcake.com或微信端，可24小时自助在线订购、在线支付。
            2、微信订购：关注【上海味多美】微信公众号，通过微信里的订购蛋糕菜单在线订购、在线支付。
          </p>
        </div>
        <div class="wxts_content_item">
          <p>3.订单处理</p>

          <p>
            17：30以后的订单，次日9：00开始处理，紧急情况可直接致电各门店咨询或订购
          </p>
        </div>
        <div class="wxts_content_item">
          <p>4.付款方式</p>
          <p>
            线上：支付宝、储值卡、网银及微信支付；:00前预订，特殊款蛋糕预订时间以商品页面提示为准。
          </p>
        </div>
        <div class="wxts_content_item">
          <p>5.配送范围及费用</p>

          <p>
            配送地址距门店3公里范围内免费配送；
            配送地址距门店3-10公里范围内收取20元/单配送费；
            配送地址距门店10公里范围外仅限到店自提，不提供配送服务；
            大型蛋糕（直径40cm以上或多层蛋糕）/西点满2000元，市内免费配送。
          </p>
        </div>
        <div class="wxts_content_item">
          <p>6.其他</p>

          <p>
            蛋糕价格变动以官网及门店价格为准
            部分产品采用应季水果点缀，会随季节的变化有所调整，产品以实物为准
            由于供货原因全球选购的原料产地会有所变化
          </p>
        </div>
      </div>
    </div>
    <div class="detail_footer">
      <div class="toCar" @click="showPopup">
        <img src="../assets/images/shoppcart.png" alt="" />
      </div>
      <div class="addCar" @click="showPopup">
        <a href="javascript:;">加入购物车</a>
      </div>
      <div class="toBuy" @click="showPopup">
        <a href="javascript:;">立即购买</a>
      </div>
    </div>
    <!-- 弹出层 -->
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '70%' }"
      close-icon="close"
      safe-area-inset-bottom
      class="popup_content"
    >
      <div class="cake_info_two">
        <div class="cake_info_two_img">
          <img :src="cakeDetails.cake_img" alt="" />
        </div>
        <div class="cake_info_two_word">
          <div class="cake_info_two_word_title">
            {{ cakeDetails.cake_title }}
          </div>
          <div class="cake_info_two_word_price">
            <span>价格：</span>
            <span class="cake_info_two_word_price_true">¥{{ cake_price }}</span>
          </div>
          <div class="cake_info_two_word_changecontent">
            {{ sizeValue }}&nbsp;{{ jiaxinValue }}&nbsp;{{ piziValue }}
          </div>
        </div>
      </div>
      <div class="parts">
        <ul>
          <li>
            <div class="parts_people">
              <span class="parts_people_icon"></span>
              <span>适合{{ cakeDetails.fit_people }}人食用</span>
            </div>
          </li>
          <li>
            <div class="parts_tableware">
              <span class="parts_tableware_iocn"></span>
              <span
                >蛋糕含{{ cakeDetails.dinnerware_count }}包餐具(每包6套)</span
              >
            </div>
          </li>
          <li>
            <div class="parts_distribution">
              <span class="parts_distribution_iocn"></span>
              <span>最早今天10:30配送</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="sel_specs">
        <ul>
          <li class="sel_specs_size">
            <div class="sel_specs_size_word">尺寸：</div>
            <div class="sel_specs_size_change">
              <span
                v-for="(item, i) in cakeSize"
                :key="i"
                :class="[sizeid == i + 1 ? 'sel_specs_active' : '']"
                :data-sizeid="i + 1"
                @click="changeSize"
                >{{ item.size_tname }}</span
              >
            </div>
          </li>
          <li class="sel_specs_composition">
            <div class="sel_specs_composition_word">坯子：</div>
            <div class="sel_specs_composition_change">
              <span
                v-for="(item, i) in cakeComposition"
                :key="i"
                :class="[piziid == i + 1 ? 'sel_specs_active' : '']"
                :data-piziid="i + 1"
                @click="changeComposition"
                >{{ item.composition_name }}</span
              >
            </div>
          </li>

          <li class="sel_specs_sandwich">
            <div class="sel_specs_sandwich_word">夹心：</div>
            <div class="sel_specs_sandwich_change">
              <span
                v-for="(item, i) in cakeSandwich"
                :key="i"
                :class="[jiaxinid == i + 1 ? 'sel_specs_active' : '']"
                :data-jiaxinid="i + 1"
                @click="changeSandwich"
                >{{ item.sw_name }}</span
              >
            </div>
          </li>
          <!-- <li class="sel_specs_num">
            <div class="sel_specs_num_word">数量：</div>
            <div class="sel_specs_num_change">
              <span @click="changeCount(-1, $event)">-</span>
              <span>{{ cake_num }}</span>
              <span @click="changeCount(+1, $event)">+</span>
            </div>
          </li> -->
        </ul>
      </div>
      <div class="querenbtn">
        <a @click="toShopCar" href="javascript:;">确认</a>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: ["cid"],

  data() {
    return {
      sizeid: 1, //对应蛋糕的大小id
      sizeValue: "", //用户点击蛋糕配方大小 显示在页面上

      piziid: 1, //对应蛋糕坯子id
      piziValue: "", //用户点击蛋糕配方坯子 显示在页面上

      jiaxinid: 1, //对应蛋糕夹心id
      jiaxinValue: "", //用户点击蛋糕配方夹心 显示在页面上

      cake_price: "", //蛋糕的价格，存入变量，便于操控

      new_price: "", //蛋糕最新的价格

      // cake_num: 1, //蛋糕的数量

      show: false, //弹出层最开始隐藏

      // 后台请求到的数据
      cakeDetails: [], //蛋糕的详情
      cakeTitle: "", //蛋糕的名称
      cakeImg: "", //蛋糕的图片
      cakeCount: "", //蛋糕的数量

      cakeBanner: [], //蛋糕的轮播图
      cakeSize: [], //蛋糕的大小
      cakeComposition: [], //蛋糕的成分
      cakeSandwich: [], //蛋糕的夹心
      cakeDetailImg: [], //蛋糕详情的图片
    };
  },
  created() {
    // 挂载时加载蛋糕详情数据
    this.loadCake(this.getCid);
  },
  mounted() {
    // 让每次点进来都是蛋糕详情页的最顶端
    window.scrollTo(0, 0);
    // 将蛋糕列表组件传过来的值保存下来
    this.cid = this.$route.params.cid;
  },

  methods: {
    toShopCar() {
      let uid = sessionStorage.getItem("uid");
      let cid = this.getCid;
      let title = this.cakeTitle;
      let pic = this.cakeImg;
      let size = this.sizeValue;
      let sandwich = this.jiaxinValue;
      let composition = this.piziValue;
      let price = this.cake_price;
      let count = this.cakeCount;

      console.log("uid：", uid);
      console.log("cid：", cid);
      console.log("title：", title);
      console.log("pic：", pic);
      console.log("size：", size);
      console.log("sandwich：", sandwich);
      console.log("composition：", composition);
      console.log("price：", price);
      console.log("count：", count);

      this.axios
        .post(
          "/shopcart/addCart",
          `uid=${uid}&cid=${cid}&title=${title}&pic=${pic}&size=${size}&sandwich=${sandwich}&composition=${composition}&price=${price}&count=${count}`
        )
        .then((res) => {
          console.log(res);
          // this.$router.push("/shoppingCar");
          this.$toast({
            message: "添加成功！",
            forbidClick: true,
            type: "success",
            duration: 3000,
          });
        });
    },
    // 改变数量
    // changeCount(delta, event) {
    //   if (this.cake_num == 1) {
    //     if (event.target.innerHTML == "-") {
    //       return;
    //     }
    //   }
    //   this.cake_num += delta;
    //   if (event.target.innerHTML == "-") {
    //     this.cake_price = this.cake_price - this.new_price;
    //   } else {
    //     this.cake_price = this.cake_price + this.new_price;
    //   }
    //   console.log(this.cake_price);
    //   console.log(this.cake_num);
    // },
    // 改变指定蛋糕大小
    changeSize(e) {
      let id = e.target.dataset.sizeid;
      let name = e.target.innerHTML;
      // console.log(name);
      this.sizeid = id;
      this.sizeValue = name;
      // console.log(this.sizeValue);
    },
    // 改变指定蛋糕成分
    changeComposition(e) {
      let id = e.target.dataset.piziid;
      let name = e.target.innerHTML;
      // console.log(name);
      this.piziid = id;
      this.piziValue = name;
      // console.log(this.piziValue);
    },
    // 改变指定蛋糕夹心
    changeSandwich(e) {
      let id = e.target.dataset.jiaxinid;
      let name = e.target.innerHTML;
      // console.log(name);
      // console.log(e.target.dataset.jiaxinid);
      this.jiaxinid = id;
      this.jiaxinValue = name;
      // console.log(this.jiaxinValue);
    },
    // 显示弹出遮罩层
    showPopup() {
      this.show = true;
    },
    // 左上角返回到上一页
    goback() {
      this.$router.go(-1);
    },
    // 加载指定蛋糕id对应的蛋糕类型
    loadCake(cake_cid) {
      this.axios.get(`/cake/cakeDetails?cid=${cake_cid}`).then((res) => {
        // console.log(res);
        this.cakeDetails = res.data.allCakeDetailsResult[0];
        // 蛋糕的各种属性
        this.cakeTitle = this.cakeDetails.cake_title;

        this.cakeImg = this.cakeDetails.cake_img;

        this.cakeCount = this.cakeDetails.cake_count;
        // console.log(this.cakeDetails);
        // console.log(this.cakeTitle);
        // console.log(this.cakeImg);
        // console.log(this.cakeCount);

        this.cakeBanner = res.data.cakeBannerResult;

        this.cakeSize = res.data.cakeSizeResult;

        this.cakeComposition = res.data.cakeCompositionResult;

        this.cakeSandwich = res.data.cakeSandwichResult;

        this.cakeDetailImg = res.data.cakeDetailImgResult;
        // console.log(this.cakeSize);
        // 指定蛋糕配方选择栏默认值
        this.sizeValue = this.cakeSize[0].size_tname;

        this.piziValue = this.cakeComposition[0].composition_name;

        this.jiaxinValue = this.cakeSandwich[0].sw_name;

        // console.log(this.cakeComposition);
        // console.log(this.cakeSandwich);
        // console.log(this.cakeDetails);
        //将数据库得到的蛋糕价格保存到data变量中
        this.cake_price = this.cakeDetails.price;
      });
    },
  },
  watch: {
    sizeValue(newValue, oldValue) {
      if (
        (oldValue == "15cm" && newValue == "20cm") ||
        (oldValue == "20cm" && newValue == "25cm") ||
        (oldValue == "25cm" && newValue == "30cm")
      ) {
        this.cake_price = this.cake_price * 1 + 40;
      } else if (
        (oldValue == "20cm" && newValue == "15cm") ||
        (oldValue == "25cm" && newValue == "20cm") ||
        (oldValue == "30cm" && newValue == "25cm")
      ) {
        this.cake_price = this.cake_price * 1 - 40;
      } else if (
        (oldValue == "15cm" && newValue == "25cm") ||
        (oldValue == "20cm" && newValue == "30cm")
      ) {
        this.cake_price = this.cake_price * 1 + 80;
      } else if (
        (oldValue == "25cm" && newValue == "15cm") ||
        (oldValue == "30cm" && newValue == "20cm")
      ) {
        this.cake_price = this.cake_price * 1 - 80;
      } else if (oldValue == "15cm" && newValue == "30cm") {
        this.cake_price = this.cake_price * 1 + 120;
      } else if (oldValue == "30cm" && newValue == "15cm") {
        this.cake_price = this.cake_price * 1 - 120;
      } else if (oldValue == "3层" && newValue == "5层") {
        this.cake_price = this.cake_price * 1 + 2000;
      } else if (oldValue == "5层" && newValue == "3层") {
        this.cake_price = this.cake_price * 1 - 2000;
      } else if (oldValue == "3层" && newValue == "6层") {
        this.cake_price = this.cake_price * 1 + 3000;
      } else if (oldValue == "6层" && newValue == "3层") {
        this.cake_price = this.cake_price * 1 - 3000;
      } else if (oldValue == "5层" && newValue == "6层") {
        this.cake_price = this.cake_price * 1 + 1000;
      } else if (oldValue == "6层" && newValue == "5层") {
        this.cake_price = this.cake_price * 1 - 1000;
      }
      // this.new_price = this.cake_price;
    },
    piziValue(newValue, oldValue) {
      // 递进关系 -> 原味蛋糕 - 巧克力味蛋糕 - 提拉米苏慕斯蛋糕 - 乳酪蛋糕
      if (
        (oldValue == "原味蛋糕" && newValue == "巧克力味蛋糕") ||
        (oldValue == "巧克力味蛋糕" && newValue == "提拉米苏慕斯蛋糕") ||
        (oldValue == "提拉米苏慕斯蛋糕" && newValue == "乳酪蛋糕")
      ) {
        this.cake_price = this.cake_price * 1 + 10;
      } else if (
        (oldValue == "巧克力味蛋糕" && newValue == "原味蛋糕") ||
        (oldValue == "提拉米苏慕斯蛋糕" && newValue == "巧克力味蛋糕") ||
        (oldValue == "乳酪蛋糕" && newValue == "提拉米苏慕斯蛋糕")
      ) {
        this.cake_price = this.cake_price * 1 - 10;
      } else if (
        (oldValue == "原味蛋糕" && newValue == "提拉米苏慕斯蛋糕") ||
        (oldValue == "巧克力味蛋糕" && newValue == "乳酪蛋糕")
      ) {
        this.cake_price = this.cake_price * 1 + 20;
      } else if (
        (oldValue == "提拉米苏慕斯蛋糕" && newValue == "原味蛋糕") ||
        (oldValue == "乳酪蛋糕" && newValue == "巧克力味蛋糕")
      ) {
        this.cake_price = this.cake_price * 1 - 20;
      } else if (oldValue == "原味蛋糕" && newValue == "乳酪蛋糕") {
        this.cake_price = this.cake_price * 1 + 30;
      } else if (oldValue == "乳酪蛋糕" && newValue == "原味蛋糕") {
        this.cake_price = this.cake_price * 1 - 30;
      }
      // this.new_price = this.cake_price;
    },
    jiaxinValue(newValue, oldValue) {
      if (oldValue == "杂果夹心" && newValue == "酸奶提子夹心") {
        this.cake_price = this.cake_price * 1 + 20;
      } else if (oldValue == "酸奶提子夹心" && newValue == "杂果夹心") {
        this.cake_price = this.cake_price * 1 - 20;
      } else if (oldValue == "杂果夹心" && newValue == "无水果夹心") {
        this.cake_price = this.cake_price * 1 - 10;
      } else if (oldValue == "无水果夹心" && newValue == "杂果夹心") {
        this.cake_price = this.cake_price * 1 + 10;
      } else if (oldValue == "酸奶提子夹心" && newValue == "无水果夹心") {
        this.cake_price = this.cake_price * 1 - 30;
      } else if (oldValue == "无水果夹心" && newValue == "酸奶提子夹心") {
        this.cake_price = this.cake_price * 1 + 30;
      }
      // this.new_price = this.cake_price;
    },
  },
  computed: {
    getCid() {
      //TypeCake组件传过来的cid
      return this.$route.query.cid;
    },
  },
};
</script>
<style scoped src="../assets/css/cakedetail.css"></style>
<style lang="scss" scoped></style>
